<template>
  <div class="publishTask">
    <van-sticky>
      <van-nav-bar title="发布任务" />
    </van-sticky>

    <div class="item" v-for="item in list">
      <div class="header u-flex"><span></span>{{ item.name }}</div>
      <van-grid square :border="false"
        ><van-grid-item
          @click="reach(value.id, value.name)"
          v-for="value in item.sublist"
          :key="value.id"
          :icon="value.icon ? value.icon : img"
          size="28px"
          :text="value.name"
      /></van-grid>
    </div>
    <!-- <div class="item">
			<div class="header">热门活动</div>
			<van-grid square><van-grid-item v-for="value in 7" :key="value" icon="photo-o" text="文字" /></van-grid>
		</div> -->
  </div>
</template>
<script>
import Vue from "vue";
import { Image as VanImage } from "vant";
import { API_PATH } from "@/api/index.js";
import { JOB_GET } from "@/api/api.js";
import { fliterKind } from "@/util/util.js";
import {
  Tabbar,
  NoticeBar,
  TabbarItem,
  Search,
  Swipe,
  SwipeItem,
  Grid,
  GridItem,
  Tab,
  Tabs,
  PullRefresh,
  List,
  Lazyload,
  Sticky,
  DropdownMenu,
  DropdownItem,
} from "vant";
Vue.use(Tabbar);
Vue.use(TabbarItem);
Vue.use(Swipe);
Vue.use(Search);
Vue.use(SwipeItem);
Vue.use(Grid);
Vue.use(GridItem);
Vue.use(Tab);
Vue.use(Tabs);
Vue.use(PullRefresh);
Vue.use(List);
Vue.use(Lazyload);
Vue.use(Sticky);
Vue.use(VanImage);
Vue.use(NoticeBar);
Vue.use(DropdownMenu);
Vue.use(DropdownItem);
export default {
  name: "publishTask",
  components: {
    [Tabs.name]: Tabs,
    [Tab.name]: Tab,
  },
  data() {
    return {
      value1: 0,
      value2: "a",
      option1: [
        { text: "赏金级别", value: 0 },
        { text: "0~40", value: 1 },
        { text: "40~400", value: 2 },
        { text: "400~4000", value: 3 },
      ],
      option2: [
        { text: "全部分类", value: "a" },
        { text: "公众号", value: "b" },
        { text: "微信扫码", value: "c" },
        { text: "小程序", value: "d" },
        { text: "分享评论", value: "e" },
        { text: "拼多多", value: "f" },
        { text: "其他", value: "g" },
      ],
      list: [],
      img: require("../.././assets/images/kind.png"),
    };
  },
  mounted() {
    this.getKind();
  },
  methods: {
    async getKind() {
      const { data } = await this.$reqGet(JOB_GET, {});
      if (data.status == 1) {
        this.list = JSON.parse(JSON.stringify(data.data));
      }
      console.log(data);
    },
    justifyImgWidth(e) {
      console.log(e.currentTarget.clientWidth);
      this.Imgheight = e.currentTarget.clientWidth;
      // this.logoWidth = e.currentTarget.clientHeight * 2.75
    },

    goSearch() {
      // this.$router.push({ name: 'Search' });
    },
    reach(id, name) {
      this.$router.push({ name: "step1", query: { id: id, name: name } });
    },
    // 选择分类
    // chooseKind(e) {
    // 	if (e == '3') {
    // 		this.$router.push({ name: 'areaSeckill' });
    // 	}
    // }
  },
};
</script>
<style scoped="scoped" lang="scss">
.publishTask {
  background-color: #fff;
  padding-bottom: 166rem;

  .van-nav-bar {
    background-color: var(--theme);

    /deep/ .van-nav-bar__title {
      color: #fff;
      font-size: 36rem;
      font-weight: bold;
    }
  }

  .item {
    padding: 0 24rem;

    .header {
      font-size: 32rem;
      font-weight: bold;

      span {
        width: 8rem;
        height: 28rem;
        background-color: var(--theme);
        border-radius: 4rem;
        margin: 36rem 0;
        margin-right: 16rem;
      }
    }

    /deep/ .van-icon {
      width: 96rem;
      height: 96rem;

      img {
        width: 96rem;
        height: 96rem;
      }
    }

    /deep/ .van-grid-item__text {
      color: #343434;
    }
  }
}
</style>
